<template>
    <div class="home-template">
        <div id="travel-map"></div>
    </div>
</template>

<script>
    import MAP from "@/consts/map.const"
    import TRAVELDATA from "@/consts/travelData.const"

    const geoCoordMap = MAP.geoCoordMap;
    const travelData = TRAVELDATA.travelPath;
    const planeIcon = MAP.icon.plane;
    const color = MAP.color;

    export default {
        name: "Home",
        data() {
            return {}
        },
        methods: {
            convertData(data) {
                let res = [];
                for (let i = 0; i < data.length; i++) {
                    let dataItem = data[i];
                    let fromCoord = geoCoordMap[dataItem[0].name];
                    let toCoord = geoCoordMap[dataItem[1].name];
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                return res;
            },
            handleData(data) {
                let obj = {};
                let arr = [];
                for (let i = 0, len1 = data.length; i < len1; i++) {
                    if (arr.indexOf(data[i].start) === -1) {
                        arr.push(data[i].start)
                    }
                    for (let j = 0, len2 = arr.length; j < len2; j++) {
                        obj[arr[j]] = []
                    }
                }
                for (let i = 0, len = data.length; i < len; i++) {
                    obj[data[i].start].push([{'name': data[i].start}, {'name': data[i].end}])
                }
                return obj
            },
            /**
             * 生成轨迹图
             */
            generateTravelMap() {
                let series = [];
                let data = this.handleData(travelData);
                let tempArr = [];
                for (let k in data) {
                    tempArr.push([k, data[k]])
                }
                tempArr.forEach((item, i) => {
                    series.push(
                        {
                            name: item[0],
                            type: 'lines',
                            zlevel: 1,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0.7,
                                color: '#fff',
                                symbolSize: 3
                            },
                            lineStyle: {
                                normal: {
                                    color: color[i],
                                    width: 1,
                                    curveness: 0.2,
                                    type: 'solid'
                                }
                            },
                            data: this.convertData(item[1])
                        },
                        {
                            name: item[0],
                            type: 'lines',
                            zlevel: 2,
                            symbol: ['none', 'arrow'],
                            symbolSize: 6,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0,
                                // symbol: planeIcon,
                                symbolSize: 5
                            },
                            lineStyle: {
                                normal: {
                                    color: color[i],
                                    width: 1,
                                    opacity: 0.6,
                                    curveness: 0.2
                                }
                            },
                            data: this.convertData(item[1])
                        },
                        {
                            name: item[0],
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            rippleEffect: {
                                brushType: 'fill'
                            },
                            label: {
                                normal: {
                                    show: true,
                                    color: color[i],
                                    position: 'top',
                                    formatter: '{b}',
                                    fontSize: 14
                                }
                            },
                            symbolSize: 8,
                            itemStyle: {
                                normal: {
                                    color: color[i]
                                }
                            },
                            data: [{
                                name: item[0],
                                value: geoCoordMap[item[0]]
                            }]
                        }
                    )
                });
                let myChart = echarts.init(document.getElementById('travel-map'));
                let option = {
                    backgroundColor: '#404a59',
                    title: {
                        text: 'Bidding轨迹行径图',
                        left: 'center',
                        top: '10',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false,
                                color: '#fff'
                            }
                        },
                        roam: true,
                        zoom: 1,
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#404a59'
                            },
                            emphasis: {
                                areaColor: '#323c48'
                            }
                        }
                    },
                    series: series
                };
                myChart.clear();
                myChart.setOption(option, true);
                // 添加事件监听器
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        },
        mounted() {
            this.generateTravelMap();
        }
    }
</script>

<style lang="scss">
    .home-template {
        width: 100%;
        height: 100%;
        background-color: #fff;
        #travel-map {
            width: 100%;
            height: 100%;
        }
    }
</style>